<!-- 多企业登录页面 -->
<template>
	<div class="multi-enterprise">
		<div class="multi-enterprise-box" @click="emit('close')">
			<LeftOutlined class="multi-enterprise-icon" />
			<div class="multi-enterprise-word">返回</div>
		</div>
		<a-typography-title class="multi-enterprise-title">
			你可进入以下商户
			<br />
			<text class="multi-enterprise-subtitle">{{ loginState.username.replace(/(\d{3})\d*(\d{4})/, '$1****$2') }}已在以下企业或者组织绑定了账号，你可进入以下任一家商户</text>
		</a-typography-title>
		<div class="multi-enterprise-enterprise-box">
			<div v-for="e in enterprises" :key="e.id" @click="changeActiveEnterprise(e.id, e.status)" class="multi-enterprise-account" :class="[e.status !== 'NORMAL' ? 'multi-enterprise-account-disabled-box' : `${active.activeEnterprise === e.id ? 'multi-enterprise-account-active' : ''}`]">
				<img v-if="e.logo" class="multi-enterprise-account-left" :src="e.logo" />
				<img v-else-if="isLockinEnv()" class="multi-enterprise-account-left" src="@/assets/images/login-lockin/logo.png" />
				<img v-else class="multi-enterprise-account-left" src="@/assets/images/login/logo-blue.png" />

				<div class="multi-enterprise-account-right">
					<div class="multi-enterprise-account-right-box">
						<div class="multi-enterprise-account-address">{{ e.name }}</div>
						<div v-if="e.status !== 'NORMAL'" class="multi-enterprise-account-disable">
							<div class="multi-enterprise-account-disable-word">已禁用</div>
						</div>
					</div>
					<div class="multi-enterprise-account-time">最近一次登录时间&nbsp;:&nbsp;{{ e.lastLoginTime }}</div>
				</div>
				<img v-if="e.status === 'NORMAL' && active.activeEnterprise === e.id" class="multi-enterprise-account-active-img" src="@/assets/images/login/active.png" />
			</div>
		</div>
		<a-button @click="login" type="primary" size="large" block>确定</a-button>
	</div>
</template>
<script setup lang="ts">
	import {reactive} from 'vue'
	import {useStore} from '@/store/index'
	import {message} from 'ant-design-vue'
	import {LeftOutlined} from '@ant-design/icons-vue'
	import {isLockinEnv} from '@/utils/common/index'

	const props = defineProps<{
		loginState: any
		enterprises: any[]
	}>()

	const active = reactive<any>({
		activeEnterprise: null
	})
	const emit = defineEmits(['close'])
	const store = useStore()
	/**
	 *切换
	 */
	const changeActiveEnterprise = (id: string, status: string) => {
		switch (status) {
			case 'NORMAL':
				active.activeEnterprise = id
				break
			default:
				return message.warning('该企业被禁用，无法登录')
		}
	}
	const login = () => {
		if (active.activeEnterprise) {
			store.userLogin({...props.loginState, tenantId: active.activeEnterprise})
		} else {
			message.warning('请选择需要登录的企业账号')
		}
	}
</script>

<style lang="less" scoped>
	.multi-enterprise {
		padding: 35px 40px 20%;
		animation: fadeInAnimation ease 1.5s;
		animation-iteration-count: 1; /*设置动画播放次数*/
		animation-fill-mode: forwards;
		@keyframes fadeInAnimation {
			0% {
				opacity: 0; /*设置不透明度*/
			}
			100% {
				opacity: 1;
			}
		}

		.multi-enterprise-box {
			display: flex;
			align-items: center;
			cursor: pointer;
			color: #0266ff;
			margin-bottom: 40px;

			.multi-enterprise-icon {
				width: 18px;
				height: 20px;
				text-align: left;
				font-size: 16px;
				line-height: 23px;
				font-weight: 600;
				align-items: left;
			}

			.multi-enterprise-word {
				text-align: left;
				width: 56px;
				height: 20px;
				font-size: 14px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				line-height: 19px;
			}
		}

		.multi-enterprise-title {
			// width: 234px;
			// height: 38px;
			font-size: 26px;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #0266ff;
			line-height: 30px;
			text-align: left;
		}

		.multi-enterprise-subtitle {
			font-size: 16px;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);
			line-height: 24px;
		}

		.multi-enterprise-enterprise-box {
			width: 100%;
			height: 75%;
			overflow: auto;
		}

		.multi-enterprise-enterprise-box::-webkit-scrollbar {
			display: none;
		}

		.multi-enterprise-account {
			cursor: pointer;
			display: flex;
			position: relative;
			margin-bottom: 10px;
			width: 100%;
			height: 86px;
			border-radius: 2px 2px 2px 2px;
			opacity: 1;
			padding: 18px 0px 18px 10px;
			border: 1px solid #d9d9d9;

			.multi-enterprise-account-left {
				width: 23%;
				height: 100%;
				color: @primary-color;
			}

			.multi-enterprise-account-right {
				width: 100%;
				margin-left: 10px;

				.multi-enterprise-account-right-box {
					display: flex;
					justify-content: space-between;
					// position: relative;
					.multi-enterprise-account-address {
						max-width: 200px;
						width: 70%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 16px;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);
						line-height: 24px;
						display: inline-block;
					}

					.multi-enterprise-account-disable {
						width: 25%;
						background: rgba(0, 0, 0, 0.1);
						border-radius: 12px 12px 12px 12px;
						padding: 2px 8px;
						opacity: 1;

						.multi-enterprise-account-disable-word {
							font-size: 12px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.65);
							text-align: center;
						}
					}
				}

				.multi-enterprise-account-time {
					margin-top: 8px;
					// width: 265px;
					width: 100%;
					// height: 22px;
					font-size: 12px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #86909c;
					line-height: 22px;
				}
			}

			.multi-enterprise-account-active-img {
				position: absolute;
				// margin: 53px 6px 6px 369px;
				margin: 53px 6px 6px 93%;
			}
		}

		.multi-enterprise-account-active {
			cursor: pointer;
			// width: 400px;
			width: 100%;
			height: 86px;
			background: #f0f8ff;
			box-shadow: 2px 2px 8px 0px rgba(2, 102, 255, 0.08);
			border-radius: 2px 2px 2px 2px;
			opacity: 1;
			border: 1px solid #0266ff;
		}

		.multi-enterprise-account-disabled-box {
			pointer-events: none;
			// width: 400px;
			width: 100%;
			height: 86px;
			background: rgba(0, 0, 0, 0.04);
			border-radius: 2px 2px 2px 2px;
			opacity: 1;
			border: 1px solid rgba(0, 0, 0, 0.15);
		}
	}
</style>
